import { View, Text, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import ZhTabsHeader from './ZhTabsHeader'
import ZhTabsBody from './ZhTabsBody'

export default function ZhTabs() {
  //状态变量 —— 当前显示的是哪个页签
  let [idx, setIdx] = useState(0)

  //切换页签 —— 传递给子组件ZhTabsHeader，用于获取子组件的数据
  // let switchTab = (i)=>{
  //   console.log('父组件接收到子组件1传来的数据：', i)
  //   setIdx( i )
  // }
  return (
    <View style={ss.tabs}>
      {/* 第一部分：Tabs的头部部分 —— 自定义组件ZhTabsHeader ——  Props Up*/}
      <ZhTabsHeader change={setIdx}/>
      {/* 第二部分：Tabs的主体部分 —— 自定义组件ZhTabsBody —— Props Down*/}
      <ZhTabsBody num={idx}/>
    </View>
  )
}

let ss = StyleSheet.create({
  tabs: {
    flex: 1, //尺寸(即高度)增长权重为：1
    backgroundColor: '#fff', //背景颜色
  },
})